<template>
	<SecondTitle title="检票出入口数量" />
	<div class="list">
		<div class="item" v-for="item in list">
			<img :src="item.icon" alt="" class="icon" />
			<div class="info">
				<div class="number">
					<div class="total DIN">{{ item.total }}</div>
					<div class="unit">{{ item.unit }}</div>
				</div>
				<div class="name">{{ item.name }}</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { requireImg } from '../../../utils/common'
	import { ref } from 'vue'
	const list = ref([
		{
			name: '开放检票口数量',
			total: 10,
			unit: '个',
			icon: requireImg('global/entrance1.png'),
		},
		{
			name: '开放入口数量',
			total: 5,
			unit: '个',
			icon: requireImg('global/entrance2.png'),
		},
		{
			name: '开放出口数量',
			total: 8,
			unit: '个',
			icon: requireImg('global/entrance3.png'),
		},
	])
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		justify-content: space-around;
		margin-top: 150px;
	}
	.item {
		display: flex;
		img.icon {
			width: 248px;
			height: 220px;
		}
		.info {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.number {
			display: flex;
			align-items: end;
			.total {
				font-size: 56px;
			}
			.unit {
				font-size: 28px;
				margin-left: 20px;
			}
		}
		.name {
			width: 140px;
			margin-top: 20px;
			font-size: 32px;
		}
		&:nth-child(odd) {
			.total {
				color: #ccf7ff;
				text-shadow: 0px 0px 14px rgba(0, 128, 255, 0.8);
			}
		}
		&:nth-child(even) {
			.total {
				color: #ffe0c0;
				text-shadow: 0px 0px 14px rgba(255, 128, 0, 0.9);
			}
		}
	}
</style>
